<template>
  <div class="logon">
    <Nav></Nav>
    <div class="content">
      <div class="left"></div>
      <div class="right">
        <div class="top">
          <span>注册</span>
        </div>
        <div class="inputbox">
          电话：<input
            type="text"
            v-model="usename"
            placeholder="请输入11位电话号码"
          /><br />
          密码：<input
            type="password"
            v-model="password"
            placeholder="密码由6-20位数字和字母组成"
          /><br />
          邮箱：<input
            type="text"
            v-model="email"
            placeholder="请输入邮箱"
          /><br />
          <button class="zuce" @click="setRegistre()">注册</button>
        </div>
      </div>
    </div>
    <Foot></Foot>
  </div>
</template>

<script>
export default {
  components: {
    Nav: () => import("../../components/Nav.vue"),
    Foot: () => import("../../components/Footnav.vue"),
  },
  props: {},
  data() {
    return {
      // touxiang: "",
      // imgsrc: "../img/head.webp",
      usename: "",
      password: "",
      email: "",
    };
  },
  watch: {},
  computed: {},
  methods: {
    async setRegistre() {
      let regtel = /^[1][0-9]{10}$/; //验证电话号码
      var regpwd =/^([a-zA-Z0-9]|[._]){4,19}$/;; // 判断密码 只能输入5-20个以字母开头的字符串
     console.log( regtel.test(this.usename),regpwd.test(this.password));
      if (regtel.test(this.usename)&&regpwd.test(this.password)) {
        let res = await this.$axios.post("/api/rootlogin", {
          id: this.usename,
          pwd: this.password,
          email: this.email,
        });
        if (res.data.code == 4001) {
          alert("邮箱已经注册");
        } else if (res.data.code == 2001) {
          window.location.href = "http://localhost:8080/logon"; //本地跳转
          // window.open('http://localhost:8080/logon')   //打开一个新的浏览器
        }
      }else{
        alert('电话输入有误,请重新输入')
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.content {
  display: flex;
  flex: 1 1 auto;
}
.left {
  width: 760px;
  height: 528px;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  background-image: url(//spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/skypixel-auth-bg.def7b558.jpg);
}
.right {
  /* width: 760px; */
  height: 528px;
  /* display: flex; */
  align-items: center;
  background-color: white;
}
.right .top {
  margin: 0 auto;
  font-size: 2rem;
  margin-left: -1rem;
  margin-bottom: 1.6rem;
  font-weight: 600;
}
.inputbox {
  padding-left: 200px;
}
.inputbox input {
  padding-top: 20px;
  width: 400px;
  height: 40px;
  margin: 0 auto;
  margin-top: 30px;
  outline: none;
  border: 1px solid gray;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
/* 注册按钮 */

.inputbox .zuce {
  width: 300px;
  height: 37px;
  background-image: url("../../image/login-btn.png");
  background-size: contain;
  margin-top: 34px;
  margin-left: 15px;
  border-radius: 20px;
  border: 0;
  color: white;
  font-size: 18px;
}
</style>